<script setup lang="ts">
import dayjs from "dayjs";
import {MyComment} from "@/interfaces/apiResponse.ts";
import myComment from "@/composables/myComment.ts";
import myAuth from "@/composables/myAuth.ts";
import myLocalStore from "@/composables/myLocalStore.ts";

const user_id = myLocalStore().get('userInfo')?.id
const showReply = ref<boolean>(false);
const {addReply, delComment} = myComment()
const {comment, type, comments} = defineProps<{
  comment: MyComment,
  type: 'main' | 'item',
  comments: MyComment[]
}>()
const form = reactive({
  content: '',
  t_id: comment.topic_id,
  c_id: comment.id
})
const add = async () => {
  const resComment = await addReply(form);
  comments?.find(c => c.id == resComment?.belong_to_comment?.id)?.reply_comments?.push(resComment);
  showReply.value = false;
  form.content = '';
}
</script>

<template>
  <main>
    <section class="item">
      <div class="top">
        <div class="left">
          <div class="avatar">
            <el-avatar
                @click="$router.push({name:'person.me',params:{u_id:comment.user.id}})"
                class="hover:scale-105 duration-300 cursor-pointer" shape="square" :size="42"
                :src="comment.user.avatar"/>
          </div>
          <div class="info">
                <span class="name">
                  <icon-me fill="#9013fe"/>
                <router-link :to="{name:'person.me',params:{u_id:comment.user.id}}">{{
                    comment.user.name
                  }}</router-link>
                </span>
            <span class="time">
                  <icon-stopwatch-start fill="#7ed321"/>
                   {{ dayjs(comment.created_at).fromNow() }}
                </span>
          </div>
        </div>
        <div class="right">
          <icon-comment
              v-if="myAuth().isLogin()"
              class="hover:text-green-700 cursor-pointer" theme="outline" size="16"
              @click="showReply = !showReply"/>
          <icon-delete
              @click="delComment(comment.id)"
              v-if="myAuth().isSuperAdmin() || comment?.user_id == user_id"
              class="hover:text-amber-700 cursor-pointer" theme="outline" size="16"
          />
        </div>
      </div>
      <div class="bottom">
        <template v-if="type == 'main'">
          <markdown-markdown-preview :text="comment.html"/>
        </template>
        <template v-else>
          <div class="flex justify-start item text-xs gap-1">
            <icon-circle-double-right theme="outline" size="14" fill="#7ed321"/>
            <span class="hover:underline cursor-pointer"
                  @click="$router.push({name:'person.me',params:{u_id:comment.reply_user.id}})"
            >{{ comment?.reply_user?.name }}</span>:
          </div>
          <div class="text-xs text-slate-600">
            {{ comment.content }}
          </div>
        </template>
        <div class="mt-2" v-if="showReply">
          <el-input
              v-model="form.content"
              :rows="2"
              style="font-size:12px"
              type="textarea"
              placeholder="请输入回复内容"
          />
          <el-button class="mt-2" type="success" size="small" @click="add">
            <icon-comment/>&nbsp;回复
          </el-button>
        </div>
      </div>
    </section>
    <slot/>
  </main>

</template>

<style lang="scss" scoped>
section.item {
  @apply mt-3 border border-slate-300 rounded shadow;
  div.top {
    @apply p-2 border border-b-slate-200 flex justify-between items-center;
    div.left {
      @apply flex items-center justify-center gap-1;
      div.avatar {

      }

      div.info {
        @apply flex flex-col gap-1 justify-center;
        span.name, span.time {
          @apply flex justify-start items-center text-xs text-slate-600 gap-1;
        }

      }
    }

    div.right {
      @apply flex gap-2 items-center justify-center;
    }
  }

  div.bottom {
    @apply p-3 text-slate-600;

  }
}
</style>